<!--
  @author yangjiangming
  @date 2018-12-10 20:40:28
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html th:replace="~{work/modify/common/layout :: layout('配件报销', ~{::title}, ~{::content}, ~{::script})}"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>工单管理-配件报销</title>
</head>
<body>

<div class="content" th:fragment="content">
    <style>
        #mountings{
            margin-top: 0;
        }
        .d-color-red{
            color: red;
        }
        .part-table tbody .layui-table-cell{
            height: 140px;
            line-height: 140px;
        }
        .part-table tbody .layui-input{
            height: 140px;
            line-height: 140px;
        }
        .part-table td{
            line-height: 28px;
        }
    </style>

    <form action="" class="layui-form">
        <!-- 需要报销的配件总数 -->
        <input id="reimburseCount" type="hidden" th:value="${reimburseCount}">
        <input type="text" name="workId" th:value="${orderWork.workId}" hidden/>
        <input type="text" name="orderId" th:value="${orderWork.orderId}" hidden/>

        <div class="layui-form-item" th:each="entry, iterStat : ${reimburseMap}">
            <label class="layui-form-label">报销配件：</label>
            <div class="layui-input-block  part-table">
                <table th:id="|table-partreimburse-${iterStat.index}|" class="layui-table" th:lay-filter="|table-partreimburse-${iterStat.index}|">
                    <thead>
                    <tr>
                        <th lay-data="{field:'applyId', edit: false,hide: true}"></th>
                        <th lay-data="{field:'orderPartId', edit: false,hide: true}"></th>
                        <th lay-data="{field:'masterName', width:'10%', edit: false}">工程师</th>
                        <th lay-data="{field:'typeName', width:'10%', edit: false}">配件类型</th>
                        <th lay-data="{field:'partFullName', width:'24%', edit: false}">配件名称</th>
                        <th lay-data="{field:'declare',width:'10%',edit:false}">申报金额(元)</th>
                        <th lay-data="{field:'number', width:'9%', edit: false}">数量</th>
                        <th th:if="${unAllowReimburseMap[entry.key]}" lay-data="{field:'price', width:'8.5%', edit: false}">单价(元)</th>
                        <th th:if="${!unAllowReimburseMap[entry.key]}" lay-data="{field:'price', width:'8.5%', edit: 'text'}">单价(元)</th>
                        <th lay-data="{field:'totalAmount', width:'8.9%', edit: false}">报销金额(元)</th>
                        <th lay-data="{field:'comparisonImgSrc', width:'20%', edit: false}">新旧配件对比</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="part : ${entry.value}">
                        <td th:text="${part.applyId}"></td>
                        <td th:text="${part.orderPartId}"></td>
                        <td th:text="${part.masterName}"></td>
                        <td th:text="${part.typeName}"></td>
                        <td th:text="${part.partFullName}"></td>
                        <td th:text="${#moneyUtil.parseToYuan(part.declare)}"></td>
                        <td th:text="${part.number}"></td>
                        <td th:text="${#moneyUtil.parseToYuan(part.price)}"></td>
                        <td th:text="${#moneyUtil.parseToYuan(part.totalAmount)}"></td>
                        <td>
                            <img th:layer-src="${part.comparisonImgSrc}" th:src="${part.comparisonImgSrc}" alt="新旧配件对比照">
                            <span style="color: red;" th:text="${part.aiStatusName}"></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <table class="layui-table pass-table" th:if="${imgPassMap[entry.key] != null}">
                    <thead>
                    <tr>
                        <th class="pass-table-title" colspan="2">凭证</th>
                    </tr>
                    <tr>
                        <th>支付</th>
                        <th>收据</th>
                        <th th:if="${imgPassMap[entry.key].imgSrc3 != null && imgPassMap[entry.key].imgSrc3 != ''}">店铺</th>
                        <th th:if="${imgPassMap[entry.key].imgSrc4 != null && imgPassMap[entry.key].imgSrc4 != ''}">旧件</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <img th:if="${imgPassMap[entry.key] != null}" th:layer-src="${imgPassMap[entry.key].imgSrc1}" th:src="${imgPassMap[entry.key].imgSrc1}" alt="小票">
                        </td>
                        <td>
                            <img th:if="${imgPassMap[entry.key] != null}" th:layer-src="${imgPassMap[entry.key].imgSrc2}" th:src="${imgPassMap[entry.key].imgSrc2}" alt="发票">
                        </td>
                        <td th:if="${imgPassMap[entry.key].imgSrc3 != null && imgPassMap[entry.key].imgSrc3 != ''}">
                            <img th:layer-src="${imgPassMap[entry.key].imgSrc3}" th:src="${imgPassMap[entry.key].imgSrc3}" alt="店铺">
                        </td>
                        <td th:if="${imgPassMap[entry.key].imgSrc4 != null && imgPassMap[entry.key].imgSrc4 != ''}">
                            <img th:layer-src="${imgPassMap[entry.key].imgSrc4}" th:src="${imgPassMap[entry.key].imgSrc4}" alt="旧件">
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="padding-left: 0; text-align: left;">报销结果：</label>
                    <div th:id="|typeContent-${iterStat.index}|" style>
                        <div class="layui-input-block" style="margin-left: 0;" th:if="${!unAllowReimburseMap[entry.key]}" th:include="::#typeContentTool-1">
                        </div>
                        <div class="layui-input-block" style="margin-left: 0;" th:if="${unAllowReimburseMap[entry.key]}" th:include="::#typeContentTool-2">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="padding-left: 0; text-align: left;">报销总额：</label>
                    <div class="layui-input-block" style="margin-left: 0;">
                        <span th:id="|totalAmount-${iterStat.index}|" style="line-height: 35px" class="d-color-red" th:text="(${#moneyUtil.parseToYuan(reimburseVOAmountMap[entry.key])})">0</span>元
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item" >
            <label class="layui-form-label">申报金额：</label>
            <div class="layui-input-block" >
                <span th:id="declaredAmount" style="line-height: 35px" class="d-color-red">0</span>元
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">报销备注：</label>
            <div class="layui-input-block">
                <textarea name="operatorRemark" class="layui-textarea" lay-verify="required" placeholder="请输入"></textarea>
            </div>
        </div>
        <div class="layui-from-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="success">保存</button>
                <!--<button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="fail">报销失败</button>-->
            </div>
        </div>
    </form>
</div>

<!-- thymeleaf中显示某对象使用${username}，但如果username为null，thymeleaf就会报错，加个?就可以解决 -->
<script type="text/html" id="typeContentTool-1">
    <input type="radio" th:name="|status-${entry?.key}|" th:lay-filter="|status-${entry?.key}|" value="3" title="报销成功" checked>
    <input type="radio" th:name="|status-${entry?.key}|" th:lay-filter="|status-${entry?.key}|" value="4" title="报销失败">
</script>

<script type="text/html" id="typeContentTool-2">
    <input type="radio" th:name="|status-${entry?.key}|" th:lay-filter="|status-${entry?.key}|" value="3" title="报销成功" disabled>
    <input type="radio" th:name="|status-${entry?.key}|" th:lay-filter="|status-${entry?.key}|" value="4" title="报销失败" disabled>
    <input type="radio" th:name="|status-${entry?.key}|" th:lay-filter="|status-${entry?.key}|" value="5" title="不予报销" checked disabled>
</script>

<script type="text/javascript" th:inline="javascript">
    var partsList = [[${reimburseMap}]];
    var standardReimbursementAmount = [[${standardReimbursementAmount}]];
    //var conversionMap = [[${conversionMap}]];

    var layuiModel = {
        oms_work_modify_partreimburse: "work/modify/zmn.oms.work.modify.partreimburse"
    };
</script>
</body>
</html>